<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车案例</title>
    <style>
      table {
        /* 边框合并 */
        border-collapse: collapse;
        text-align: center;
      }
      thead {
        background-color: #f9f9f9;
      }
      td,
      th {
        padding: 10px 16px;
        border: 1px solid #aaa;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script src="./data.js"></script>
    <script src="./format.js"></script>

    <script type="text/babel">
      // 1.定义App根组件
      class App extends React.Component {
        constructor() {
          super(); //继承了就要调用super
          this.state = {
            //数据固定放在state中
            message: "Hello World",
            books: books,
          };
        }
        // 计算总价格
        getTotalPrice() {
          const totalPrice = this.state.books.reduce((perValue, item) => {
            return perValue + item.price * item.count;
          }, 0);

          return totalPrice;
        }

        changeCount(index, count) {
          // 浅拷贝
          // 不直接修改this.state.books的数据，做浅拷贝修改
          const newBooks = [...this.state.books];
          newBooks[index].count += count;
          this.setState({ books: newBooks });
        }

        removeItem(index) {
          // 浅拷贝
          // 不直接修改this.state.books的数据，做浅拷贝修改
          const newBooks = [...this.state.books];
          newBooks.splice(index, 1);
          this.setState({ books: newBooks });
        }

        // 当有数据时调用这个函数
        renderBookList() {
          const { books } = this.state;
          return (
            <div>
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {books.map((item, index) => {
                    return (
                      <tr key={item.id}>
                        <td>{index + 1}</td>
                        <td>{item.name}</td>
                        <td>{item.date}</td>
                        <td>{formatPrice(item.price)}</td>
                        <td>
                          <button
                            onClick={() => this.changeCount(index, -1)}
                            disabled={item.count <= 1}
                          >
                            -
                          </button>
                          {item.count}
                          <button onClick={() => this.changeCount(index, 1)}>
                            +
                          </button>
                        </td>
                        <td>
                          <button onClick={() => this.removeItem(index)}>
                            删除
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
              <h2>总价格：{formatPrice(this.getTotalPrice())}</h2>
            </div>
          );
        }
        // 当购物车为空时调用这个函数
        randerBookEmpty() {
          return (
            <div>
              <h2>购物车为空，请求添加书籍</h2>
            </div>
          );
        }
        render() {
          const { books } = this.state;

          // 1.计算总价格方式一
          // let totalPrice = 0;
          // for (let i = 0; i < books.length; i++) {
          //   const book = books[i];
          //   totalPrice += book.price * book.count;
          // }

          // 2.计算总价格方式二
          // const totalPrice = books.reduce((perValue, item) => {
          //   return perValue + item.price * item.count;
          // }, 0);
          return books.length ? this.renderBookList() : this.randerBookEmpty();
        }
      }

      // 1.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>
